* {
    padding: 0;
    margin: 0;
}

.main {
    background: url(../img/fy_indexBg.jpg) repeat-y;
    width: 100%;
    height: 1136px;
    overflow: hidden;
}

.main_top {
    margin-top: 30px;
    font-size: 0;
}

.fyfont1 img:nth-child(1) {
    position: absolute;
    top: -35px;
    left: -50px;
    opacity: 0;
    animation: bird 1s .8s forwards;
}

@keyframes bird {
    from {
        top: 40px;
        left: 300px;
    }
    to {
        top: -35px;
        left: -50px;
        opacity: 1;
    }
}

.fyfont1 img:nth-child(2) {
    position: relative;
    right: -23px;
}

.fyfont1 img:nth-child(3) {
    animation: heart2 1s linear, heart1 .6s infinite alternate 1.2s;
}

.main_top img {
    vertical-align: middle;
}

.fyfont1 {
    background: url("../img/fy_fontbg1.png") no-repeat;
    background-size: 100% 100%;
    width: 440px;
    height: 78px;
    position: relative;
    margin: 10px 0 10px 113px;
    line-height: 78px;
    text-align: right;
    animation: fyfontbg .6s linear;
    transform-origin: left;

}

.fyfont2 {
    background: url("../img/fy_fontbg2.png");
    margin: 10px 0 10px 46px;
    width: 469px;
    height: 78px;
    line-height: 78px;
    text-align: center;
    animation: fyfontbg .6s linear;
    transform-origin: right;
}

.fyfont3 img:nth-child(1) {
    animation: heart2 1s linear, heart1 .6s infinite alternate 1.2s;
}

.fyfont3 {
    background: url("../img/fy_fontbg3.png");
    /*text-align: center;*/
    margin: 10px 0 10px 150px;
    padding-left: 10px;
    width: 397px;
    height: 80px;
    animation: fyfontbg .6s linear;
    transform-origin: 0px -100px;
}

.fyfont4 {
    background: url("../img/fy_fontbg4.png");
    text-align: center;
    margin: 10px 0 10px 60px;
    line-height: 83px;
    width: 449px;
    height: 83px;
    animation: fyfontbg .6s linear;
    transform-origin: right;
}

.fyfont5 {
    background: url("../img/fy_fontbg5.png");
    text-align: center;
    margin: 10px 0 10px 30px;
    line-height: 79px;
    width: 486px;
    height: 79px;
    opacity: 0;
    animation: fyfontbg .6s linear .4s forwards;
    transform-origin: left;
}

.fyfont6 img:last-child {
    position: absolute;
    top: 0;
    opacity: 0;
    animation: heart2 .5s linear 1.2s forwards, heart1 .6s infinite alternate 1.7s;
    right: 140px;
}

.fyfont6 {
    background: url("../img/fy_fontbg6.png");
    position: relative;
    text-align: center;
    width: 486px;
    height: 79px;
    margin-left: 90px;
    opacity: 0;
    animation: fyfontbg .6s linear .4s forwards;
    transform-origin: right;
}

.main_bottom {
    position: absolute;
    bottom: 0;
}

.person1 {
    position: absolute;
    bottom: 0;
    background: url("../img/fy_Pp0.png");
    width: calc(514px / 2);
    height: 437px;
    z-index: 10;
    left: 50px;
    animation: person1-show .8s, person1 .6s steps(2) infinite .6s;
}

.gamestart {
    position: absolute;
    bottom: 331px;
    left: 95px;
    width: 460px;
    height: 194px;
    background: url("../img/fy_gamestartbg.png");
    line-height: 194px;
    text-align: center;
    transform-origin: bottom center;
    animation: person1-text-2 1s, person1-text .6s infinite alternate 1s;
}

.gamestart img:nth-child(1) {
    position: relative;
    top: 41px;
    animation: fontshow2 1s linear;

}

.gamestart img:nth-child(2) {
    position: absolute;
    top: 79px;
    right: 72px;
    opacity: 0;
    animation: start 1s linear .6s infinite alternate;
}

.font-animation {
    opacity: 0;
    animation: fontshow 1s linear .3s forwards;
}

.fyfont5 img {
    opacity: 0;
    animation: fontshow .5s linear .8s forwards;
}

.fyfont6 img:first-child {
    opacity: 0;
    animation: fontshow .5s linear .8s forwards;
}

.fy_indexTi {
    position: relative;
    animation: fy_indexTi .8s;
}

@keyframes person1 {
    100% {
        background-position: -514px;
    }
}

@keyframes person1-text {
    from {
        transform: rotateZ(0deg);
    }
    to {
        transform: rotateZ(10deg);
    }
}

@keyframes person1-text-2 {
    from {
        opacity: 0;
        transform: rotateZ(50deg);
    }
    to {
        opacity: 1;
        transform: rotateZ(0deg);
    }
}

@keyframes heart1 {
    from {
        transform: scale(1);
    }
    to {
        transform: scale(1.3);
    }
}

@keyframes heart2 {
    from {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        transform: scale(2.5);
        opacity: 1;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes fyfontbg {
    from {
        opacity: 1;
        transform: rotateZ(20deg);
    }
    to {
        transform: rotateZ(0deg);
        opacity: 1;
    }
}

@keyframes fontshow {
    from {
        transform: scale(1.4);
        opacity: 0;
    }

    to {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes fontshow2 {
    from {
        transform: scale(0.3);
        opacity: 0;
    }

    to {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes start {
    from {
        opacity: 1;
        transform: scale(1.5);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes person1-show {
    from {
        opacity: 0;
        left: 20px;
    }

    to {
        opacity: 1;
        left: 50px;
    }

}

@keyframes fy_indexTi {
    from {
        opacity: 0;
        bottom: -50px;
    }
    to {
        opacity: 1;
        bottom: 0;
    }
}

.gameTis {
    margin-left: 61px;
    vertical-align: middle;
    animation: gameTis .5s linear infinite alternate;
}

@keyframes gameTis {
    from {
        transform: scale(.7);
    }
    to {
        transform: scale(.9);
    }
}

.musicimg {
    vertical-align: middle;
    transform-origin: bottom center;
    animation: musicimg .3s linear infinite alternate;
}

.musicimg-list {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    width: 45px;
    height: 150px;
    overflow: hidden;
    z-index: 2;
    animation: musicimg-list-1 4s infinite;
}

.musicimg-list img:nth-child(1) {
    animation: musicimg-list_1 4s infinite;
}

.musicimg-list img:nth-child(2) {
    margin-left: 30px;
    animation: musicimg-list_2 4s infinite;
}

.musicimg-list img:nth-child(3) {
    animation: musicimg-list_3 4s infinite;
}

@keyframes musicimg-list-1 {
    0% {
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 1;
    }
}

@keyframes musicimg-list_1 {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 1;
    }

    67% {
        opacity: 0;
    }

    84% {
        opacity: 0;
    }

    100% {
        opacity: 0;
    }
}

@keyframes musicimg-list_2 {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 1;
    }

    67% {
        opacity: 1;
    }

    84% {
        opacity: 0;
    }

    100% {
        opacity: 0;
    }
}

@keyframes musicimg-list_3 {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 1;
    }

    67% {
        opacity: 1;
    }

    84% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

@keyframes musicimg-list-2 {
    0% {
        opacity: 0;
    }
    50% {
        opacity: 0;
    }
    100% {

    }
}

@keyframes musicimg {
    from {
        transform: rotateZ(-10deg);
    }

    to {
        transform: rotateZ(10deg);
    }

}

.text2 {
    background: url("../img/musictext.png");
    width: 550px;
    height: 160px;
    margin: 0 auto;
    line-height: 160px;
}

.text2 input {
    border: none;
    font-size: 40px;
    width: 450px;
    margin-left: 50px;
    outline: none;
}

.text2_1 {
    background: url("../img/btn1_1.png");
    height: 60px;
}

.text2_2 {
    background: url("../img/btngo1.png") top center no-repeat;
    height: 78px;
    animation: btngo1 1s infinite alternate;
}

@keyframes btngo1 {
    from {
        transform: scale(0.8);
    }
    to {
        transform: scale(1);
    }
}

.text2_3 {
    margin-top: 60px;
    background: url("../img/btn1_2.png");
    height: 60px;
}

.text2_4 {
    background: url("../img/btngo2.png") top center no-repeat;
    height: 78px;
    animation: btngo2 1s infinite alternate;
}

@keyframes btngo2 {
    from {
        transform: rotateX(0deg);
    }
    to {
        transform: rotate(5deg);
    }
}

.main2_bottom {
    margin-top: 60px;
    position: absolute;
    bottom: 0;
    width: 426px;
}

.money {
    position: absolute;
    bottom: 0;
}

.money img:nth-child(1) {
    position: absolute;
    bottom: 0;
    animation: b2img 5s linear infinite alternate;
    z-index: 0;
}

.money img:nth-child(2) {
    position: absolute;
    top: -310px;
    left: 80px;
    z-index: 1;
}

.money img:nth-child(3) {
    position: absolute;
    top: -278px;
    left: 195px;
    z-index: 1;
    animation: b2img_2 2s linear infinite alternate;
}

.money img:nth-child(4) {
    position: absolute;
    top: -173px;
    left: 190px;
    transform-origin: top right;
    animation: b2img_1 2s linear infinite alternate;
    z-index: 1;
}

.fy_Pp3 {
    position: absolute;
    bottom: 0;
    right: -214px;
    display: inline-block;
    background: url("../img/fy_Pp3.png");
    width: calc(664px / 2);
    height: 474px;
    animation: person2 .3s steps(2) infinite;
}

@keyframes person2 {
    100% {
        background-position-x: -664px;
    }
}

@keyframes b2img {
    from {
        bottom: 20px;
    }
    to {
        bottom: 0px;
    }
}

@keyframes b2img_1 {
    from {
        transform: rotateZ(0deg);
    }
    to {
        transform: rotateZ(10deg);
    }
}

@keyframes b2img_2 {
    from {
        top: -278px;
    }
    to {
        top: -285px;
    }
}

.text2-1 {
    animation: text-2 1s;
}

@keyframes text-2 {
    from {
        transform: scale(0.5);
    }
    to {
        transform: scale(1);
    }
}

.fy_Pp {
    position: absolute;
    bottom: 0;
    display: inline-block;
    background: url("../img/fy_Pp.png");
    width: calc(640px / 2);
    height: 434px;
    animation: person3 .3s steps(2) infinite;
}

@keyframes person3 {
    100% {
        background-position-x: -640px;
    }
}

.fy2_wp {
    position: absolute;
    bottom: 200px;
    left: 300px;
    background: url("../img/fy2_wp.png");
    width: 300px;
    height: 230px;
    text-align: center;
    transform-origin: bottom left;
    animation: fy2_wp .7s;
}

.fy2_wp img {
    margin-top: 60px;
    opacity: 0;
    animation: fy2_wp_img 1s .4s forwards;

}

@keyframes fy2_wp {
    from {
        opacity: 0;
        transform: rotateZ(40deg);
    }
    to {
        opacity: 1;
        transform: rotateZ(0deg);
    }
}

@keyframes fy2_wp_img {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.fy_Pp4 {
    position: absolute;
    bottom: 0;
    display: inline-block;
    background: url("../img/fy_Pp4.png");
    width: calc(804px / 2);
    height: 434px;
    animation: person4 .3s steps(2) infinite;
}

@keyframes person4 {
    100% {
        background-position-x: -804px;
    }
}

.fy3_wp {
    position: absolute;
    bottom: 150px;
    left: 365px;
    width: 274px;
    height: 212px;
}

.fy3_wp img {
    position: absolute;
}

.fy3_wp img:nth-child(1) {
    left: 60px;
    top: 0;
    animation: light 3s infinite;
}

@keyframes light {
    from {
        opacity: 1;
        transform: scale(1);
    }

    to {
        opacity: 0;
        transform: scale(1.4);
    }
}

.fy3_wp img:nth-child(2) {
    left: 0;
    bottom: 50px;
    transform: scale(0.7);
}

.fy3_wp img:nth-child(3) {
    right: 0;
    bottom: 50px;
    transform: scale(0.7);
}

.fy3_wp img:nth-child(4) {
    left: 60px;
    bottom: 35px;
}

.fy_Pp5 {
    position: absolute;
    bottom: 0;
    left: 166.5px;
    display: inline-block;
    background: url("../img/fy_Pp5.png");
    width: calc(614px / 2);
    height: 422px;
    animation: person5 .3s steps(2) infinite;
    margin: auto;
    z-index: 1;
}

@keyframes person5 {
    100% {
        background-position-x: -614px;
    }
}

.fy5_mu2 {
    position: absolute;
    background: url("../img/fy5_mu2.png");
    width: 640px;
    height: 207px;
    bottom: 250px;
    z-index: 0;
}

.fy5_mu2 img {
    position: absolute;
}

.fy5_mu2 img:nth-child(1) {
    left: 25px;
    top: 60px;
    transform: rotateZ(-10deg);
}

.fy5_mu2 img:nth-child(2) {
    left: 145px;
    top: 25px;
    transform: rotateZ(10deg);
}

.fy5_mu2 img:nth-child(3) {
    right: 100px;
    bottom: 6px;
    transform: rotateZ(-10deg);
}

.fy5_mu2 img:nth-child(4) {
    right: 25px;
    top: 10px;
    transform: rotateZ(5deg);
}

.text3_1 {
    background: url("../img/btn2_1.png");
    height: 60px;
}

.text3_3 {
    background: url("../img/btn2_2.png");
    height: 60px;
    margin-top: 60px;
}

.text4_1 {
    background: url("../img/btn3_1.png");
    height: 60px;
}

.text4_3 {
    background: url("../img/btn3_2.png");
    height: 60px;
    margin-top: 60px;
}

.text5_1 {
    background: url("../img/btn4_1.png");
    height: 60px;
}

.text5_3 {
    background: url("../img/btn4_2.png");
    height: 60px;
    margin-top: 60px;
}

.text6_1 {
    background: url("../img/btn5_1.png");
    height: 60px;
}

.text6_3 {
    background: url("../img/btn5_2.png");
    height: 60px;
    margin-top: 60px;
}

.fy_Pp6 {
    position: absolute;
    bottom: 0;
    display: inline-block;
    background: url("../img/fy_Pp6.png");
    width: calc(680px / 2);
    height: 434px;
    animation: person6 .3s steps(2) infinite;
    margin: auto;
    z-index: 1;
}

@keyframes person6 {
    100% {
        background-position-x: -680px;
    }
}

.fy6_wp img:nth-child(1) {
    animation: none;
}

.fy_Pp7 {
    position: relative;
    background: url("../img/fy_Pp7.png");
    width: calc(680px / 2);
    height: 321px;
    animation: person7_1 2s ,person7 .3s steps(2) infinite ;
    margin: 150px auto 30px auto;
    z-index: 1;
}

@keyframes person7 {
    100% {
        background-position-x: -680px;
    }
}

.money1 img {
    position: absolute;
}

.money1 img:nth-child(1) {
    top: 70px;
    left: 180px;
    opacity: 0;
    animation: money1 2s linear infinite 1s;
}

.money1 img:nth-child(2) {
    top: 160px;
    left: 190px;opacity: 0;
    animation: money1_2 2s linear infinite .5s;
}

.money1 img:nth-child(3) {
    top: 220px;
    left: 230px;
    animation: money1_3 2s linear infinite ;
}

@keyframes person7_1 {
    from {
        opacity: 0;
        margin-top: 180px
    }
    to {
        opacity: 1;
        margin-top:150px;
    }
}


@keyframes money1 {
    from {
        opacity: 0;
        top:70px;
    }

    70% {
        opacity: 1;
        top: 50px;
    }

    to {
        opacity: 0;
        top: 40px;
    }
}

@keyframes money1_2 {
    from {
        opacity: 0;
        top: 160px;
    }

    70% {
        opacity: 1;
        top: 140px;
    }

    to {
        opacity: 0;
        top: 130px;
    }
}


@keyframes money1_3 {
    from {
        opacity: 0;
        top: 220px;
    }

    70% {
        opacity: 1;
        top: 210px;
    }

    to {
        opacity: 0;
        top: 200px;
    }
}

.main7_bottom {
    position: absolute;
    top: 500px;
    text-align: center;
}

.main7_bottom img {
    position: relative;
    opacity: 0;
}

.main7_bottom img:nth-child(1) {
    animation: fy7_font1 .7s linear forwards;
}

@keyframes fy7_font1 {
    from {
        left: -320px;
        opacity: 1;
    }

    to {
        left: 0px;
        opacity: 1;
    }
}

.main7_bottom img:nth-child(2) {
    animation: fy7_font2 .7s linear .7s forwards;
}

@keyframes fy7_font2 {
    from {
        right: -320px;
        opacity: 1;
    }

    to {
        right: 0px;
        opacity: 1;
    }
}

.main7_bottom img:nth-child(3) {
    animation: fy7_font1 .7s linear 1.4s forwards;
}

.fy_Pp8 {
    position: relative;
    background: url("../img/fy_Pp8.png");
    width: calc(632px / 2);
    height: 227px;
    animation: person8_1 1s,person8 .3s steps(2) infinite ;
    margin: 100px auto 30px auto;
    z-index: 1;
}

@keyframes person8 {
    100% {
        background-position-x: -632px;
    }
}

.fy8_font {
    position: relative;
    margin-top: 30px;
    left: -320px;
    opacity: 0;

}

.fy8_font:nth-child(1) {
    animation: fy8_font .7s linear forwards;
}

.fy8_font:nth-child(2) {
    animation: fy8_font .7s linear forwards .5s;
}

.fy8_font:nth-child(3) {
    animation: fy8_font .7s linear forwards 1s;
}

.fy8_font:nth-child(4) {
    animation: fy8_font .7s linear forwards 1.5s;
}

.fy8_font:nth-child(5) {
    animation: fy8_font .7s linear forwards 2s;
}



.fy8_font img:nth-child(2) {
    position: absolute;
    right: 100px;
    top: 0;
}

.fy8_font img:nth-child(3) {
    position: absolute;
    right: 20px;
    top: 0;
}

.fy8_font6 {
    position: relative;
    text-align: center;
    left: 320px;
    opacity: 0;
    animation: fy8_font 1s linear forwards 2.5s;
}

@keyframes person8_1 {
    from {
        opacity: 0;
        margin-top: 140px
    }
    to {
        opacity: 1;
        margin-top:100px;
    }
}
.main8_bottom {
    position: absolute;
    top: 350px;
}

@keyframes  fy8_font{
    from {
        left: -320px;
        opacity: 0;
    }
    to {
        left: 0;
        opacity: 1;
    }
}


.fy9_0 {
    position: absolute;
    right: 100px;
    top:-30px;
    background: url("../img/fy9_0.png");
    width: 196px;
    height: 213px;
    z-index: 1;
    animation: fy9_0 1s linear forwards;
}

.fy9_wrap {
    position: absolute;
    top: 60px;
    width: 100%;
    height: 645px;
    background: url("../img/fy9_wrap.png");
    z-index: 0;
    animation: fy9_wrap 1s linear forwards;
}

@keyframes fy9_wrap{
    from {
        top: 60px;
    }
    to {
        top: 100px;
    }
}

@keyframes fy9_0{
    from {
        top: -30px;
        opacity: 0.5;
    }
    to {
        top: 0px;
        opacity: 1;
    }
}

.fy9-text {
    position: absolute;
    top: 97px;
    width: 640px;
    height: 630px;
    font-size: 2.3em;
    box-sizing: border-box;
    padding: 100px 80px 0;
    overflow: hidden;

}

.fy9_wp {
    animation: fy9-text 1s linear;
}
.red {
    font-size: 130%;
    color:red;
    font-weight:600;
}

.fy9-text span:nth-of-type(2) {
    text-indent: 60px;
}

@keyframes fy9-text {
    from {
        transform: scale(1.4);
        opacity: 0;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}

.fy9_bottom {
   position: absolute;
    bottom: 110px;
    text-align: center;
}

.fy9_text00 {
    margin-bottom: 40px;
    animation:fy9_text00 1s linear ;
}

@keyframes fy9_text00 {
    from {
        margin-bottom: 60px;
        transform: scale(0.4);
    }
    to {
        margin-bottom: 40px;
        transform: scale(1);
    }
}

.fy9_text {
    opacity: 0;
    animation: fy9_text_1 1s linear .7s forwards;

}

.fy9_text img:nth-child(1){
    margin-right: 10px;
    animation: fy9_text 1s linear .7s;
}

@keyframes fy9_text {
    from {
        margin-right: 120px;
    }
    to {
        margin-right: 0px;
    }
}

@keyframes fy9_text_1 {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.line {
    position: absolute;
    right: 40px;
    top: 100px;
    opacity: 0;
    z-index: 20;
    animation: line 1s linear .7s forwards;
}

@keyframes line {
    from {
        top: 100px;
        opacity: 1;
    }
    to {
        top: 0px;
        opacity: 1;
    }
}

.index_1 {
    /*display: none;*/
}

.index_2 {
    display: none;
}

.index_3 {
    display: none;
}

.index_4 {
    display: none;
}
.index_5 {
    display: none;
}
.index_6 {
    display: none;
}
.index_7 {
    display: none;
}
.index_8 {
    display: none;
}
.index_9 {
    display: none;
}

@-webkit-keyframes left {
    20% {
        margin-left: -100px;
    }
    100% {
        margin-left:640px;
    }
}
@-webkit-keyframes left_2 {
    20% {
        margin-left: 100px;
    }
    100% {
        margin-left:-640px;
    }
}
.text_left_1 div{
    width: 640px;
}

/*.text_left_1{*/
    /*animation: left 1.4s linear 2s;*/
/*}*/

.text_left_2 div{
    width: 640px;
}

/*.text_left_2{*/
    /*animation: left_2 1.4s linear 2s;*/
/*}*/